<template>
	<view>
		<u-popup :show="show" :round="10" mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false"
			@close="close" @open="open">
			<view class="box flex flex-col ai-c jc-c p-30">
				<view class="fw p-20">用户隐私保护指引</view>
				<view class="content ft-28 m-t-20">
					感谢选择我们的小程序，您使用我们的应用前，请务必仔细阅读
					<text class="link" @tap="openPrivacyContract">《用户隐私保护指引》</text>内容。
					当您点击同意并开始使用产品服务时，即表示您已理解并同意该条款内容，如您拒绝，将无法使用相应服务。
				</view>
				<button class="agree m-t-30 ft-28" id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="agree">同意并继续</button>
				<view class="reject m-t-10 ft-24 p-20" style="color: #999" @click="reject">不同意</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "Privacy",
		data() {
			return {
				show: false,
				agreeFn: null
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN
			wx.onNeedPrivacyAuthorization((resolve) => this.agreeFn = resolve)
			wx.getPrivacySetting({
				success: ({needAuthorization}) => {
					console.log('🚀🚀🚀', needAuthorization);
					if (needAuthorization) {
						this.open()
					}
				}
			});
			// #endif
		},
		methods: {
			open: function() {
				this.show = true
			},
			close: function() {
				this.show = false
			},
			openPrivacyContract: function() {
				wx.openPrivacyContract()
			},
			agree: function() {
				if(typeof this.agreeFn === 'function'){
					this.agreeFn({ buttonId: 'agree-btn', event: 'agree'})
				}
				
				this.close()
			},
			reject: function() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '拒绝协议将无法使用相应服务',
					success: function({
						confirm
					}) {
						if (confirm) {
							_this.close()
							wx.exitMiniProgram()
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		width: 550rpx;

		.content {
			line-height: 50rpx;

			.link {
				color: #3c9cff;
			}
		}

		.agree {
			width: 100%;
			height: 80rpx;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #3c9cff;
			border-color: #3c9cff;
			border-width: 1px;
			border-style: solid;
			border-radius: 100rpx;
		}
	}
</style>